// CAROUSEL
// --------

.carousel
  position: relative
  margin-bottom: $baseLineHeight
  line-height: 1


.carousel-inner
  overflow: hidden
  width: 100%
  position: relative


.carousel

  .item
    display: none
    position: relative
    $transition(.6s ease-in-out left)


  // Account for jankitude on images
  .item > img
    display: block
    line-height: 1


  .active,
  .next,
  .prev
    display: block

  .active
    left: 0


  .next,
  .prev
    position: absolute
    top: 0
    width: 100%


  .next
    left: 100%

  .prev
    left: -100%

  .next.left,
  .prev.right
    left: 0


  .active.left
    left: -100%

  .active.right
    left: 100%




// Left/right controls for nav
// ---------------------------

.carousel-control
  position: absolute
  top: 40%
  left: 15px
  width: 40px
  height: 40px
  margin-top: -20px
  font-size: 60px
  font-weight: 100
  line-height: 30px
  color: $white
  text-align: center
  background: $grayDarker
  border: 3px solid $white
  $border-radius(23px)
  $opacity(50)

  // we can't have this transition here
  // because webkit cancels the carousel
  // animation if you trip this while
  // in the middle of another animation
  // _
  // $transition(opacity .2s linear)

  // Reposition the right one
  &.right
    left: auto
    right: 15px


  // Hover state
  &:hover
    color: $white
    text-decoration: none
    $opacity(90)



// Caption for text below images
// -----------------------------

.carousel-caption
  position: absolute
  left: 0
  right: 0
  bottom: 0
  padding: 10px 15px 5px
  background: $grayDark
  background: rgba(0,0,0,.75)

.carousel-caption h4,
.carousel-caption p
  color: $white


